@charset "UTF-8";
@import url(ag-font.css);
@import url(ag-effect.css);

/*==================== 按钮模块 ====================*/
.ag-btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

/*控制一下图标+字体的对齐方式*/
.ag-btn > .agfont, .ag-btn > .agfont + * {
    display: inline-block;
    vertical-align: middle;
}

/*块按钮*/
.ag-btn-block {
    display: block;
    width: 100%;
}

/*大按钮*/
.ag-btn-lg, .ag-btn-group-lg > .ag-btn {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

/*小按钮*/
.ag-btn-sm, .ag-btn-group-sm > .ag-btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/*最小按钮*/
.ag-btn-xs, .ag-btn-group-xs > .ag-btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.ag-btn-sm > .agfont {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.ag-btn-xs > .agfont {
    font-size: 12px;
    width: 12px;
    height: 12px;
    line-height: 12px;
}

/*无圆角*/
.ag-no-radius {
    border-radius: 0;
}

/*大圆角*/
.ag-big-radius {
    border-radius: 100px;
}

/*禁止点击样式*/
.ag-btn.disabled, .ag-btn[disabled] {
    opacity: .65;
    -moz-opacity: .65;
    filter: alpha(opacity=65);
    cursor: not-allowed;
}

/*按钮里的徽章背景*/
.ag-btn .ag-badge {
    position: relative;
    top: -1px;
    background-color: #fff;
}

.ag-btn .ag-badge-dot {
    position: relative;
    top: -1px;
}

/*默认按钮*/
.ag-btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.ag-btn-default .ag-badge {
    background-color: #eee;
    color: #444;
}

.ag-btn-default.active, .ag-btn-default.focus, .ag-btn-default:active,
.ag-btn-default:focus, .ag-btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

/*禁止*/
.ag-btn-default.disabled, .ag-btn-default[disabled], .ag-btn-default.active.disabled,
.ag-btn-default.focus.disabled, .ag-btn-default.disabled:active, .ag-btn-default.disabled:focus,
.ag-btn-default.disabled:hover {
    color: #C9C9C9;
    background-color: #FBFBFB;
    border: 1px solid #e6e6e6;
    cursor: not-allowed;
}

/*蓝色按钮*/
.ag-btn-blue {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

.ag-btn-blue .ag-badge {
    color: #337ab7;
}

.ag-btn-blue.active, .ag-btn-blue.focus, .ag-btn-blue:active, .ag-btn-blue:focus,
.ag-btn-blue:hover {
    color: #fff;
    background-color: #286090;
    border-color: #286090;
}

.ag-btn-blue.border {
    border-color: #2e6da4;
}

.ag-btn-blue.border.active, .ag-btn-blue.border.focus, .ag-btn-blue.border:active,
.ag-btn-blue.border:focus, .ag-btn-blue.border:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}

/*禁止*/
.ag-btn-blue.disabled, .ag-btn-blue[disabled], .ag-btn-blue.active.disabled,
.ag-btn-blue.focus.disabled, .ag-btn-blue.disabled:active, .ag-btn-blue.disabled:focus,
.ag-btn-blue.disabled:hover {
    background-color: #337ab7;
    border-color: #337ab7;
}

.ag-btn-blue.border.disabled, .ag-btn-blue.border[disabled], .ag-btn-blue.border.active.disabled,
.ag-btn-blue.border.focus.disabled, .ag-btn-blue.border.disabled:active,
.ag-btn-blue.border.disabled:focus, .ag-btn-blue.border.disabled:hover {
    border-color: #2e6da4;
}

/*绿色按钮*/
.ag-btn-green {
    color: #fff;
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.ag-btn-green .ag-badge {
    color: #5cb85c;
}

.ag-btn-green.active, .ag-btn-green.focus, .ag-btn-green:active, .ag-btn-green:focus,
.ag-btn-green:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #449d44;
}

.ag-btn-green.border {
    border-color: #4cae4c;
}

.ag-btn-green.border.active, .ag-btn-green.border.focus, .ag-btn-green.border:active,
.ag-btn-green.border:focus, .ag-btn-green.border:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}

/*禁止*/
.ag-btn-green.disabled, .ag-btn-green[disabled], .ag-btn-green.active.disabled,
.ag-btn-green.focus.disabled, .ag-btn-green.disabled:active, .ag-btn-green.disabled:focus,
.ag-btn-green.disabled:hover {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.ag-btn-green.border.disabled, .ag-btn-green.border[disabled], .ag-btn-green.border.active.disabled,
.ag-btn-green.border.focus.disabled, .ag-btn-green.border.disabled:active,
.ag-btn-green.border.disabled:focus, .ag-btn-green.border.disabled:hover {
    border-color: #4cae4c;
}

/*天蓝色按钮*/
.ag-btn-skyblue {
    color: #fff;
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.ag-btn-skyblue .ag-badge {
    color: #5bc0de;
}

.ag-btn-skyblue.active, .ag-btn-skyblue.focus, .ag-btn-skyblue:active,
.ag-btn-skyblue:focus, .ag-btn-skyblue:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #31b0d5;
}

.ag-btn-skyblue.border {
    border-color: #46b8da;
}

.ag-btn-skyblue.border.active, .ag-btn-skyblue.border.focus, .ag-btn-skyblue.border:active,
.ag-btn-skyblue.border:focus, .ag-btn-skyblue.border:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}

/*禁止*/
.ag-btn-skyblue.disabled, .ag-btn-skyblue[disabled], .ag-btn-skyblue.active.disabled,
.ag-btn-skyblue.focus.disabled, .ag-btn-skyblue.disabled:active, .ag-btn-skyblue.disabled:focus,
.ag-btn-skyblue.disabled:hover {
    background-color: #5bc0de;
    border-color: #5bc0de;
}

.ag-btn-skyblue.border.disabled, .ag-btn-skyblue.border[disabled], .ag-btn-skyblue.border.active.disabled,
.ag-btn-skyblue.border.focus.disabled, .ag-btn-skyblue.border.disabled:active,
.ag-btn-skyblue.border.disabled:focus, .ag-btn-skyblue.border.disabled:hover {
    border-color: #46b8da;
}

/*黄色按钮*/
.ag-btn-yellow {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.ag-btn-yellow .ag-badge {
    color: #f0ad4e;
}

.ag-btn-yellow.active, .ag-btn-yellow.focus, .ag-btn-yellow:active, .ag-btn-yellow:focus,
.ag-btn-yellow:hover {
    color: #fff;
    background-color: #ec971f;
    border-color: #ec971f;
}

.ag-btn-yellow.border {
    border-color: #eea236;
}

.ag-btn-yellow.border.active, .ag-btn-yellow.border.focus, .ag-btn-yellow.border:active,
.ag-btn-yellow.border:focus, .ag-btn-yellow.border:hover {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512;
}

/*禁止*/
.ag-btn-yellow.disabled, .ag-btn-yellow[disabled], .ag-btn-yellow.active.disabled,
.ag-btn-yellow.focus.disabled, .ag-btn-yellow.disabled:active, .ag-btn-yellow.disabled:focus,
.ag-btn-yellow.disabled:hover {
    background-color: #ec971f;
    border-color: #ec971f;
}

.ag-btn-yellow.border.disabled, .ag-btn-yellow.border[disabled], .ag-btn-yellow.border.active.disabled,
.ag-btn-yellow.border.focus.disabled, .ag-btn-yellow.border.disabled:active,
.ag-btn-yellow.border.disabled:focus, .ag-btn-yellow.border.disabled:hover {
    border-color: #eea236;
}

/*红色按钮*/
.ag-btn-red {
    color: #fff;
    background-color: #d9534f;
    border-color: #d9534f;
}

.ag-btn-red .ag-badge {
    color: #d9534f;
}

.ag-btn-red.active, .ag-btn-red.focus, .ag-btn-red:active, .ag-btn-red:focus,
.ag-btn-red:hover {
    color: #fff;
    background-color: #c9302c;
    border-color: #c9302c;
}

.ag-btn-red.border {
    border-color: #d43f3a;
}

.ag-btn-red.border.active, .ag-btn-red.border.focus, .ag-btn-red.border:active,
.ag-btn-red.border:focus, .ag-btn-red.border:hover {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}

/*禁止*/
.ag-btn-red.disabled, .ag-btn-red[disabled], .ag-btn-red.active.disabled,
.ag-btn-red.focus.disabled, .ag-btn-red.disabled:active, .ag-btn-red.disabled:focus,
.ag-btn-red.disabled:hover {
    background-color: #c9302c;
    border-color: #c9302c;
}

.ag-btn-red.border.disabled, .ag-btn-red.border[disabled], .ag-btn-red.border.active.disabled,
.ag-btn-red.border.focus.disabled, .ag-btn-red.border.disabled:active,
.ag-btn-red.border.disabled:focus, .ag-btn-red.border.disabled:hover {
    border-color: #d43f3a;
}

/*紫色按钮*/
.ag-btn-purple {
    color: #fff;
    background-color: #E14DB0;
    border-color: #E14DB0;
}

.ag-btn-purple .ag-badge {
    color: #E14DB0;
}

.ag-btn-purple.active, .ag-btn-purple.focus, .ag-btn-purple:active, .ag-btn-purple:focus,
.ag-btn-purple:hover {
    color: #fff;
    background-color: #CC3399;
    border-color: #CC3399;
}

.ag-btn-purple.border {
    border-color: #d0399e;
}

.ag-btn-purple.border.active, .ag-btn-purple.border.focus, .ag-btn-purple.border:active,
.ag-btn-purple.border:focus, .ag-btn-purple.border:hover {
    color: #fff;
    background-color: #CC3399;
    border-color: #c1298e;
}

/*禁止*/
.ag-btn-purple.disabled, .ag-btn-purple[disabled], .ag-btn-purple.active.disabled,
.ag-btn-purple.focus.disabled, .ag-btn-purple.disabled:active, .ag-btn-purple.disabled:focus,
.ag-btn-purple.disabled:hover {
    background-color: #CC3399;
    border-color: #CC3399;
}

.ag-btn-purple.border.disabled, .ag-btn-purple.border[disabled], .ag-btn-purple.border.active.disabled,
.ag-btn-purple.border.focus.disabled, .ag-btn-purple.border.disabled:active,
.ag-btn-purple.border.disabled:focus, .ag-btn-purple.border.disabled:hover {
    border-color: #d0399e;
}

/*按钮组样式*/
.ag-btn-group, .ag-btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.ag-btn-group > .ag-btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ag-btn-group > .ag-btn:last-child:not(:first-child), .ag-btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ag-btn-group > .ag-btn:first-child {
    margin: 0;
}

.ag-btn-group-vertical > .ag-btn, .ag-btn-group > .ag-btn {
    position: relative;
    float: left;
}

.ag-btn-group > .ag-btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.ag-btn-group .ag-btn + .ag-btn, .ag-btn-group .ag-btn + .ag-btn-group, .ag-btn-group .ag-btn-group + .ag-btn,
.ag-btn-group .ag-btn-group + .ag-btn-group {
    margin-left: -1px;
}

.ag-btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}

.ag-btn-group-justified > .ag-btn, .ag-btn-group-justified > .ag-btn-group {
    display: table-cell;
    float: none;
    width: 1%;
}

/* 灰色按钮 */
.ag-btn-gray {
    color: #909090;
    background-color: #dcdcdc;
    border-color: #dcd8d8;
}

/*==================== 徽章样式 ====================*/
.ag-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ag-badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #777;
    border-radius: 10px;
}

.ag-badge-dot, .ag-badge-rim {
    position: relative;
    display: inline-block;
    font-size: 12px;
    background-color: #D9534F;
    color: #fff;
    vertical-align: middle;
}

.ag-badge-rim {
    height: 18px;
    line-height: 18px;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    background-color: #fff;
    color: #666;
    padding: 0 5px;
}

/*灰色背景/特殊处理*/
.ag-badge.bg-gray {
    background-color: #eee;
    color: #444;
}

/*==================== 标签样式 ====================*/
.ag-label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.ag-label-default {
    background-color: #777;
}

.ag-label-blue {
    background-color: #337ab7;
}

.ag-label-green {
    background-color: #5cb85c;
}

.ag-label-skyblue {
    background-color: #5bc0de;
}

.ag-label-yellow {
    background-color: #f0ad4e;
}

.ag-label-red {
    background-color: #d9534f;
}

.ag-label-purple {
    background-color: #e14db0;
}

.ag-label-gray {
    background-color: #999;
}

/*==================== 小三角样式 ====================*/
.ag-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border-style: solid;
    border-width: 6px;
    border-color: #fff;
    vertical-align: middle;
}

.ag-arrow-lg {
    border-width: 10px;
}

.ag-arrow-sm {
    border-width: 8px;
}

.ag-arrow-xs {
    border-width: 4px;
}

.ag-arrow.ag-arrow-up {
    border-top: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.ag-arrow.ag-arrow-right {
    border-left: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.ag-arrow.ag-arrow-down {
    border-bottom: none;
    border-left-color: transparent;
    border-right-color: transparent;
}

.ag-arrow.ag-arrow-left {
    border-right: none;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

/*==================== 表格样式 ====================*/
.ag-table {
    width: 100%;
    background-color: #fff;
    border-collapse: collapse;
    border-spacing: 0;
    cursor: default;
    color: #444;
}

.ag-table.width-auto {
    width: auto;
}

.ag-table th, .ag-table td {
    text-align: center;
    padding: 9px 10px;
    min-height: 20px;
    line-height: 20px;
    border: 1px solid #e9e9e9;
    transition: all .3s;
    -webkit-transition: all .3s;
}

.ag-table th.w60, .ag-table td.w60 {
    width: 60px;
    word-wrap: break-word;
    word-break: break-all; /*强制英文单词断行*/
}

.ag-table th.w80, .ag-table td.w80 {
    width: 80px;
    word-wrap: break-word;
    word-break: break-all; /*强制英文单词断行*/
}

.ag-table th.w100, .ag-table td.w100 {
    width: 100px;
    word-wrap: break-word;
    word-break: break-all; /*强制英文单词断行*/
}

.ag-table th.w120, .ag-table td.w120 {
    width: 120px;
    word-wrap: break-word;
    word-break: break-all; /*强制英文单词断行*/
}

.ag-table th.w150, .ag-table td.w150 {
    width: 150px;
    word-wrap: break-word;
    word-break: break-all; /*强制英文单词断行*/
}

.ag-table th.w200, .ag-table td.w200 {
    width: 200px;
    word-wrap: break-word;
    word-break: break-all; /*强制英文单词断行*/
}

.ag-table th.w300, .ag-table td.w300 {
    width: 300px;
    word-wrap: break-word;
    word-break: break-all; /*强制英文单词断行*/
}

.ag-table th.w400, .ag-table td.w400 {
    width: 400px;
    word-wrap: break-word;
    word-break: break-all; /*强制英文单词断行*/
}

.ag-table th.w500, .ag-table td.w500 {
    width: 500px;
    word-wrap: break-word;
    word-break: break-all; /*强制英文单词断行*/
}

.ag-table th.tl, .ag-table td.tl {
    text-align: left;
}

.ag-table th, .ag-table .th {
    color: #fff;
    background-color: #fe890d;
}

.tab-line, .tab-row {
    border: 1px solid #e9e9e9;
}

.tab-line th, .tab-line td {
    border: none;
    border-bottom: 1px solid #e9e9e9;
}

.tab-row td {
    border: none;
    border-right: 1px solid #e9e9e9;
}

.ag-table tr:hover td, .tab-row tr:nth-child(odd) td,
.tab-nob tr:hover td, .tab-nob tr:nth-child(odd) td {
    background-color: #f8f8f8;
}

.tab-row tr:hover td {
    background-color: #f3f3f3;
}

.tab-nob tr:hover td {
    background-color: #f3f3f3;
}

.tab-nob, .tab-nob td, .tab-nob th {
    border: none;
}

.ag-table td > input[type="text"] {
    display: inline-block;
    line-height: 20px;
    border: 1px solid #e6e6e6;
    padding: 0 5px;
    border-radius: 3px;
}

.ag-table input[type="text"] {
    margin: 0;
    border: 1px solid #ddd;
}

/*==================== 分页样式 ====================*/
#pager, .pager {
    display: block;
    color: #666;
    text-align: center;
    margin-top: 30px;
}

#pager input.page-input {
    text-align: center;
    width: 60px;
}

#pager input.go-btn, #pager input.page-input, #pager a, .pager a {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    color: #555;
    background-color: #f6f6f6;
    border: 1px solid #e2e2e2;
    vertical-align: middle;
    margin: 0 -1px 5px 0;
    padding: 0 10px;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#pager input.go-btn:hover {
    color: #ffffff;
    background-color: #ff7f14;
}

#pager span, .pager span {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    color: #444;
    vertical-align: middle;
    margin: 0 -1px 5px 0;
}

#pager a.disabled, #pager a.disabled:hover, .pager a.disabled, .pager a.disabled:hover {
    color: #ccc;
    background-color: #f2f2f2;
    border: 1px solid #e2e2e2;
    cursor: not-allowed;
}

#pager a:hover, .pager a:hover {
    color: #fff;
    border: 1px solid #ff7f14;
    background-color: #ff7f14;
}

#pager a.cursor, .pager a.cursor {
    color: #fff;
    border: 1px solid #ff7f14;
    background-color: #ff7f14;
    cursor: default;
}

#pager .page_count,
#pager .total_count {
    padding: 0 5px;
}

/*==================== 基础样式 ====================*/
.opacity0 {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

.opacity1 {
    opacity: .1;
    -moz-opacity: .1;
    filter: alpha(opacity=10);
}

.opacity2 {
    opacity: .2;
    -moz-opacity: .2;
    filter: alpha(opacity=20);
}

.opacity3 {
    opacity: .3;
    -moz-opacity: .3;
    filter: alpha(opacity=30);
}

.opacity4 {
    opacity: .4;
    -moz-opacity: .4;
    filter: alpha(opacity=40);
}

.opacity5 {
    opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
}

.opacity6 {
    opacity: .6;
    -moz-opacity: .6;
    filter: alpha(opacity=60);
}

.opacity7 {
    opacity: .7;
    -moz-opacity: .7;
    filter: alpha(opacity=70);
}

.opacity8 {
    opacity: .8;
    -moz-opacity: .8;
    filter: alpha(opacity=80);
}

.opacity9 {
    opacity: .9;
    -moz-opacity: .9;
    filter: alpha(opacity=90);
}

.opacity10 {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
}

.disabled {
    opacity: .65;
    -moz-opacity: .65;
    filter: alpha(opacity=65);
}

/*字体对齐方式*/
.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

/*浮动对齐*/
.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.float-none {
    float: none !important;
}

/*强制不换行*/
.text-nowrap {
    white-space: nowrap;
}

/*强制换行*/
.text-break {
    word-wrap: break-word;
    word-break: break-all; /*强制英文单词断行*/
}

/*省略显示*/
.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*清除前后浮动样式*/
.clear::after {
    content: '';
    display: table;
    width: 0;
    height: 0;
    line-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    float: none;
    clear: both;
}

/*显隐*/
.display-none, .template {
    display: none !important;
}

.display-block {
    display: block !important;
}

.display-inline-block {
    display: inline-block !important;
}

/*==================== 颜色样式 ====================*/
.bg-black {
    background-color: #59667a;
}

.bg-light-black {
    background-color: #424F63;
}

.bg-dark-black {
    background-color: #374152;
}

.bg-blue {
    background-color: #337ab7;
}

.bg-light-blue {
    background-color: #3099f4;
}

.bg-dark-blue {
    background-color: #286090;
}

.bg-skyblue {
    background-color: #5bc0de;
}

.bg-light-skyblue {
    background-color: #4bd6ff;
}

.bg-dark-skyblue {
    background-color: #31b0d5;
}

.bg-green {
    background-color: #5FB878;
}

.bg-light-green {
    background-color: #5cb85c;
}

.bg-dark-green {
    background-color: #449d44;
}

.bg-yellow {
    background-color: #f0ad4e;
}

.bg-light-yellow {
    background-color: #FFB800;
}

.bg-dark-yellow {
    background-color: #ec971f;
}

.bg-red {
    background-color: #d9534f;
}

.bg-light-red {
    background-color: #FF5722;
}

.bg-dark-red {
    background-color: #c9302c;
}

.bg-purple {
    background-color: #e14db0;
}

.bg-light-purple {
    background-color: #ff2eb9;
}

.bg-dark-purple {
    background-color: #CC3399;
}

.bg-gray {
    background-color: #999;
}

.bg-light-gray {
    background-color: #666;
}

.bg-dark-gray {
    background-color: #444;
}

.border-white {
    border-color: #fff;
}

.border-black {
    border-color: #59667a;
}

.border-light-black {
    border-color: #424F63;
}

.border-dark-black {
    border-color: #374152;
}

.border-blue {
    border-color: #337ab7;
}

.border-light-blue {
    border-color: #3099f4;
}

.border-dark-blue {
    border-color: #286090;
}

.border-skyblue {
    border-color: #5bc0de;
}

.border-light-skyblue {
    border-color: #4bd6ff;
}

.border-dark-skyblue {
    border-color: #31b0d5;
}

.border-green {
    border-color: #5FB878;
}

.border-light-green {
    border-color: #5cb85c;
}

.border-dark-green {
    border-color: #449d44;
}

.border-yellow {
    border-color: #f0ad4e;
}

.border-light-yellow {
    border-color: #FFB800;
}

.border-dark-yellow {
    border-color: #ec971f;
}

.border-red {
    border-color: #d9534f;
}

.border-light-red {
    border-color: #FF5722;
}

.border-dark-red {
    border-color: #c9302c;
}

.border-purple {
    border-color: #e14db0;
}

.border-light-purple {
    border-color: #ff2eb9;
}

.border-dark-purple {
    border-color: #CC3399;
}

.border-gray {
    border-color: #999;
}

.border-light-gray {
    border-color: #666;
}

.border-dark-gray {
    border-color: #444;
}

.color-white {
    color: #fff;
}

.color-black {
    color: #59667a;
}

.color-light-black {
    color: #424F63;
}

.color-dark-black {
    color: #374152;
}

.color-blue {
    color: #337ab7;
}

.color-light-blue {
    color: #3099f4;
}

.color-dark-blue {
    color: #286090;
}

.color-skyblue {
    color: #5bc0de;
}

.color-light-skyblue {
    color: #4bd6ff;
}

.color-dark-skyblue {
    color: #31b0d5;
}

.color-green {
    color: #5FB878;
}

.color-light-green {
    color: #5cb85c;
}

.color-dark-green {
    color: #449d44;
}

.color-yellow {
    color: #f0ad4e;
}

.color-light-yellow {
    color: #FFB800;
}

.color-dark-yellow {
    color: #ec971f;
}

.color-red {
    color: #d9534f;
}

.color-light-red {
    color: #FF5722;
}

.color-dark-red {
    color: #c9302c;
}

.color-purple {
    color: #e14db0;
}

.color-light-purple {
    color: #ff2eb9;
}

.color-dark-purple {
    color: #CC3399;
}

.color-gray {
    color: #999;
}

.color-light-gray {
    color: #666;
}

.color-dark-gray {
    color: #444;
}

/*==================== 扩展UI部分 ====================*/
.chk-box, .rdo-box {
    display: inline-block;
    height: 20px;
    position: relative;
    cursor: pointer;
}

.query .chk-box, .query .rdo-box {
    margin-left: 10px;
    float: left;
}

.query .rdo-box .inp-radio:checked + label:after {
    top: 11px;
}


.chk-box .inp-checkbox, .rdo-box .inp-radio {
    width: 100%;
    height: 100%;
    margin: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.chk-box .inp-checkbox + label, .rdo-box .inp-radio + label {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #d2d2d2;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    border-radius: 3px;
    transition: all .2s;
    -webkit-transition: all .2s;
}

.chk-box .inp-checkbox + label > i, .rdo-box .inp-radio + label > i {
    display: inline-block;
    width: 16px;
    height: 18px;
    line-height: 18px;
    color: #fff;
    font-size: 16px;
    vertical-align: top;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .15);
}

.rdo-box .inp-radio + label {
    border-radius: 50%;
}

.chk-box label + b, .rdo-box label + b {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    color: #666;
    font-style: normal;
    padding: 0 5px;
    vertical-align: middle;
}

.chk-box .inp-checkbox + label:hover, .rdo-box .inp-radio + label:hover, .chk-box:hover .inp-checkbox + label, .rdo-box:hover .inp-radio + label {
    border: 1px solid #ff7f14;
}

.chk-box .inp-checkbox:checked + label {
    border: 1px solid #ff7f14;
    background-color: #ff7f14;
}

.chk-box .inp-checkbox:checked + label + b {
    color: #ff7f14;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .15);
}

.rdo-box .inp-radio:checked + label {
    border: 1px solid #ff7f14;
}

.rdo-box .inp-radio:checked + label + b {
    color: #ff7f14;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .15);
}

.chk-box .inp-checkbox:checked + label > i {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
}

.rdo-box .inp-radio:checked + label:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    background-color: #ff7f14;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .15);
    border-radius: 50%;
}

.query .chk-box .inp-checkbox:checked + label:after {
    top: 9px;
}

.chk-box:hover > b, .rdo-box:hover > b {
    color: #ff7f14;
}